<template>
  <!-- 组件属性 -->
  <div class="widgrtAttrList">
    <!-- 标题 -->
    <div class="title">
      <h3>{{type && list[type]['title']}}</h3>
      <!-- 模板创建提示 -->
      <div class="tips">编辑提示 <i class="el-icon-warning"></i>
        <div class="tipsCon">
          <div v-if="comData.commission==0">1. 普通组件位于左上角时：设置X=4,Y=5为最佳效果。</div>
          <div v-if="comData.commission==0">2. 普通组件位于右上角时：设置X=631,Y=5为最佳效果。</div>
          <div v-if="comData.commission==1">1. 定制组件位于第一行时：设置X=4,Y=5为最佳效果。</div>
        </div>
      </div>
    </div>
    
    <!-- 组件操作信息 -->
    <component :is="type&& list[type]['com']" :comData="comData" :ispreview="ispreview"></component>
  </div>
</template>

<script>
// 小组件属性
import NavbarAttr from '@/components/visualization/model/widgetAttrList/navbarAttr.vue' //导航栏
import PosterAttr from '@/components/visualization/model/widgetAttrList/posterAttr.vue' //海报位
import TextposterAttr from '@/components/visualization/model/widgetAttrList/textposterAttr.vue' //文字海报
import BannerBarAttr from '@/components/visualization/model/widgetAttrList/bannerBarAttr.vue' //轮播海报
import VideoBarAttr from '@/components/visualization/model/widgetAttrList/videoBarAttr.vue' //视频位
import BannerVideoAttr from '@/components/visualization/model/widgetAttrList/bannerVideoAttr.vue' //轮播视频
import BannerVideoAttr1 from '@/components/visualization/model/widgetAttrList/bannerVideoAttr1.vue' //轮播视频-定制

// 定制组件-普通海报
import RowThreeColPosterAttr from '@/components/visualization/model/customMadeWidgetAttr/rowThreeColPosterAttr.vue' //1-3
import RowSixColPosterAttr from '@/components/visualization/model/customMadeWidgetAttr/rowSixColPosterAttr.vue' //1-6
import RowTenColPosterAttr from '@/components/visualization/model/customMadeWidgetAttr/rowTenColPosterAttr.vue' //1-10
// 定制组件-文字海报
import RowTwoColTextAttr from '@/components/visualization/model/customMadeWidgetAttr/rowTwoColTextAttr.vue' //1-2
import RowThreeColTextAttr from '@/components/visualization/model/customMadeWidgetAttr/rowThreeColTextAttr.vue' //1-3
import RowFourColTextAttr from '@/components/visualization/model/customMadeWidgetAttr/rowFourColTextAttr.vue' //1-4
import RowSixColTextAttr from '@/components/visualization/model/customMadeWidgetAttr/rowSixColTextAttr.vue' //1-6

import {WIDGET_ATTRLIST} from '@/commont/constants/config'; // 静态配置
export default {
  name: "widgrtAttrList",
  components: {
    NavbarAttr,PosterAttr,TextposterAttr,BannerBarAttr,VideoBarAttr,
    BannerVideoAttr,BannerVideoAttr1,
    RowThreeColPosterAttr,RowSixColPosterAttr,RowTenColPosterAttr,
    RowTwoColTextAttr,RowThreeColTextAttr,RowFourColTextAttr,RowSixColTextAttr
  },
  props: {
    comData: {
      type: Object,
      default: () => {}
    },
    ispreview:{
      type:Boolean,
      default: false
    }
  },
  data () {
    return {
      type: '',//组件类型
      list: WIDGET_ATTRLIST,
    }
  },
  mounted () {
    // 初始化组件类型
    this.type = this.comData.type;
  },
}
</script>

<style lang="less" scoped>
.widgrtAttrList{
  margin-top: 15px;
  // 标题
  .title{
    display: flex;
    align-items: center;
    padding: 0 15px;
    h3{
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }
    // 编辑提示
    .tips{
      color:#e6a23c;
      margin-left: 10px;
      &:hover{
        .tipsCon {
          display: block;
        }
      }
    }
    .tipsCon{
      display: none;
      background: #fff;
      padding: 10px;
      border: 1px solid #cdcdcd;
      position: absolute;
      top: 40px;
      z-index: 9;
    }
  }
  
  // 模板信息
  .comInfo{
    margin-top: 10px;
    margin-left: 5px;
    .item{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 8px;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
      &:nth-last-child(1){
        border: none;
      }
      .label{
        width: 80px;
        font-weight: bold;
      }
      .infoCon{
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        div{
          display: flex;
          align-items: center;
        }
      }
    }
  }

}

</style>